<template>
    <div>
        这是测试&lt;component&gt;组件的
        <el-button @click="changeCom">切换组件</el-button>
        <div>
            <component
                :is="com"
                :data="'测试传入属性'"
                @custom-event="customEvent"
            ></component>
        </div>
        <div>{{ eventStr }}</div>
    </div>
</template>

<script>
import dynamicCom1 from "./dynamic-com1.vue";
import dynamicCom2 from "./dynamic-com2.vue";
export default {
    components: { dynamicCom1, dynamicCom2 },
    props: {
        // dynamicCom1Vue: Object
    },
    data() {
        return {
            com: "dynamicCom1",
            eventStr: "",
        };
    },
    
    methods: {
        changeCom() {
            if (this.com == "dynamicCom1") {
                this.com = "dynamicCom2";
            } else {
                this.com = "dynamicCom1";
            }
        },
        customEvent() {
            this.eventStr = "监听到子组件的点击事件";
        },
    },
};
</script>

<style>
</style>